<template>
  <view class="details-top">
    <view class="details-title" >
      {{ title }}
    </view>
    <view class="box centent">
      <text class="header-title min">
        {{ list.name }}
        <view class="integral-box">
          权益分
          <text class="integral-val">
            {{ list.integral }}
          </text>
        </view>
      </text>
      <view class="tag-box">
        <uni-tag
          v-for="item in list.label"
          :key="item"
          type="primary"
          :text="item"
          inverted="true"
          size="small"
        ></uni-tag>
      </view>
      <view class="state">

        <view class="elasticity">
            <view class="elasticity-item" v-for="item in list.medal" :key="item.name">
              <image class="" :src="item.url" >

              </image>
              <view class="name">
                {{ item.name }}
              </view>
            </view>
        </view>
        <view class="elasticity-box elasticity">
          <!-- <view class="btn" @click="goPortrait"> 综合评价 </view> -->
            <view class="btn" @click="$unity3dGlobal"> 个人空间 </view>
            <!-- <view class="btn" @click="onFriend"> 加为好友 </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

  <script setup>
import { defineProps } from "vue";
const proos = defineProps({
  list: {
    type: Object,
    default: new Object(),
  },
  title: {
    type: String,
    default: "",
  },
});
  </script>

  <style lang="less" scoped>
@import "@/static/style/global.less";
.details-top {
  width: 100vw;
  height: 357rpx;
  background: @mutual-img;
  background-size: 100% 100%;
  position: relative;
  margin-bottom: 380rpx;
  .details-title {
    width: 100%;
    text-align: center;
    font-size: @font-size-31;
    font-weight: 500;
    font-family: "ali-m";
    line-height: 90rpx;
    color: @color-font;
  }
  .box {
    // "type": "default",
						// "backgroundColor": "transparent",
    width: 92vw;
    bottom: -310rpx;
    background-color: @color-font;
    padding: 20rpx 20rpx;
    .min {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        .integral-box {
          margin-right: 20rpx;
          font-size: @font-size-23;
          .integral-val {
      color: @color-orange;
      font-size: @font-size-31;
      font-family: "din";
      font-weight: bold;
    }
        }
      }
    .tag-box {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f4f5fa;
    }
    .state {
      margin: 20rpx 0;
      font-size: @font-size-23;
      color: @color-label;
      font-family: "ali";
      font-weight: 400;
      view {
        margin: 5rpx 0;
        &.elasticity {
          height: 180rpx;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          .elasticity-item {
            image {
              width: 130rpx;
              height: 130rpx;
            }
            .name {
              width: 100%;
              text-align: center;
            }
          }
        }
        &.elasticity-box {
            margin-top: 15rpx;
            justify-content: flex-start;
          height: 60rpx;
          .btn {
            width: 120rpx;
            height: 52rpx;
            background: @bg-color;
            text-align: center;
            line-height: 52rpx;
            margin-right: 20rpx;
            padding: 0 20rpx;
          }
        }
      }
      text {
        color: @color-green;
      }
    }
  }
}
</style>
